<template>
  <view class="mine">
    <view class="top-bg"></view>
    <view class="mine-info" @tap="handleClickMine">
      <view class="mine-info-base">
        <text class="user-name">HI，{{ isLogin ? (black_Get(info, 'nickname')) : '前往登录' }}</text>
        <text v-if="isLogin" class="iconfont" @click.prevent.stop="toQrCode">&#xe646;</text>
        <text class="iconfont in">&#xe641;</text>
      </view>
      <view v-if="isLogin" class="mine-info-account">
        <text>账号：{{ black_Get(info, 'username') }}</text>
      </view>
    </view>

    <view class="mine-main">
      <view class="mine-block integral">
        <view class="mine-block-item" @tap="navIntegral">
          <view class="mine-block-item__top">
            {{ black_Get(info, 'memberAchieve.integral', '0') | loginNumberFilter(isLogin) }}</view>
          <view class="mine-block-item__btm">业绩积分</view>
        </view>
        <view class="mine-block-item" @tap="navShopList">
          <text class="mine-block-item__top">{{ shopQuantity | loginNumberFilter(isLogin) }}</text>
          <text class="mine-block-item__btm">我的店铺</text>
        </view>
      </view>

      <view class="mine-block object" v-if="isLogin">
        <view class="mine-block-item" @tap="nav('/subpackage/order/pages/type')">
          <image class="mine-block-item__top img" :src="'icon/order.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">我的订单</text>
        </view>
        <view class="mine-block-item" @tap="navMyteam">
          <image class="mine-block-item__top img" :src="'icon/group.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">查看团队</text>
        </view>
        <view class="mine-block-item" @tap="nav('/subpackage/shop/pages/ccb-pay-open-tip/index')">
          <image class="mine-block-item__top img" :src="'icon/safe.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">支付认证</text>
        </view>
        <view class="mine-block-item" @tap="nav('/subpackage/shop/pages/activity/entry')">
          <image class="mine-block-item__top img" :src="'icon/activity.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">活动管理</text>
        </view>
        <view class="mine-block-item" @tap="developing">
          <image class="mine-block-item__top img" :src="'icon/favor.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">我喜欢</text>
        </view>
        <view class="mine-block-item" @tap="nav('/subpackage/default/pages/message/type')">
          <image class="mine-block-item__top img" :src="'icon/message.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">消息</text>
        </view>
        <view class="mine-block-item" @tap="isPopupShow = true">
          <image class="mine-block-item__top img" :src="'icon/contract.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">联系客服</text>
        </view>
        <view class="mine-block-item" @tap="navMa('wx8a661b1b75f66322', '/pages/index/index', {})">
          <image class="mine-block-item__top img" :src="'icon/to-member.png' | prefixOssUrl" />
          <text class="mine-block-item__btm">切换会员端</text>
        </view>

        <view v-if="black_Get(info, '_raw.isCertificate', 0)" class="mine-block-item"
          @tap="nav('/subpackage/axq/pages/contract/list')">
          <uni-badge :text="totalContract" absolute
            :custom-style="{ backgroundColor: '#f00', borderRadius: '50%', width: '30rpx', height: '30rpx', top: '-16rpx', right: '-8rpx', fontSize: '20rpx', lineHeight: '30rpx' }">
            <image class="mine-block-item__top img" :src="'icon/viewer-contract.png' | prefixOssUrl" />
          </uni-badge>
          <text class="mine-block-item__btm">我的合同</text>
        </view>
      </view>

      <view class="mask" v-if="isPopupShow"></view>
      <view class="popup" v-if="isPopupShow">
        <image class="p-img" :src="'background-image/contract.png' | prefixOssUrl" alt="" />
        <view class="iconfont close" @tap="isPopupShow = false">&#xe650;</view>
        <view class="p-title">全国统一咨询热线</view>
        <view class="p-number">
          <text class="iconfont n-phone">&#xe604;</text>400-8953068
        </view>
        <view class="p-btn">
          <button class="consult" open-type="contact">在线咨询</button>
          <view class="call" @tap="call">拨打电话</view>
        </view>
      </view>

      <view v-if="!isNoTipShow && isLogin" class="m-tip" @tap="colseTipShow">
        <image :src="'background-image/to-member-tip.png' | prefixOssUrl" alt="" />
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex';
  import {
    localStorage
  } from '../../utils/localStorage'
  import MemberMixin from '@/mixins/member';
  import {
    model
  } from '@/model';
  const {
    PageBo
  } = model.collection;
  export default {
    mixins: [MemberMixin],
    filters: {
      loginNumberFilter(v, isLogin) {
        return isLogin ? v : '--'
      }
    },
    data() {
      return {
        isNoTipShow: false,
        isAccountBalanceShow: true,
        isSVIPWalletShow: true,
        isPopupShow: false,
        shopId: '',
        shopName: '',
        integralType: {
          integralBase: 1,
          integralBuy: 2,
          integralPromoter: 3,
          integralExchange: 4,
          itegralMarket: 5
        },
        totalContract: 0
      }
    },
    computed: {
      ...mapState(['isLogin']),
      ...mapState('user', ['info']),
      ...mapState('user', ['shopList']),
      typeId() {
        return this.info.type
      },
      shopQuantity() {
        return this.shopList ? this.shopList.length : 0
      }
    },
    onShow() {
      if (localStorage.getToken()) {
        this.getShopList();
        this.getContractCount();
      }
    },
    onPullDownRefresh() {
      if (this.isLogin) {
        this.getUserInfo().then(() => {
          this.toast('刷新成功')
          uni.stopPullDownRefresh()
        })
        setTimeout(() => {
          uni.stopPullDownRefresh()
        }, 3000)
      } else {
        uni.stopPullDownRefresh()
      }
    },
    methods: {
      ...mapActions('user', ['getUserInfo']),
      ...mapActions('user', ['getShopList']),
      toQrCode() {
        this.nav('/subpackage/member/pages/account/invite-code/index')
      },
      handleClickMine() {
        if (this.isLogin) {
          this.nav('/subpackage/member/pages/account/index')
        } else {
          this.nav('/pages/login/index')
        }
      },
      navIntegral() {
        const integral = this.black_Get(this.info, 'memberAchieve.integral', '0')
        if (this.isLogin) {
          this.nav(`/subpackage/member/pages/account/achieve/index?integral=${integral}`)
        } else {
          this.nav('/pages/login/index')
        }
      },
      navShopList() {
        if (this.isLogin) {
          this.nav('/subpackage/shop/pages/list/index')
        } else {
          this.nav('/pages/login/index')
        }
      },
      navMyteam() {
        const memberId = this.get(this, 'info.memberStatistics.memberId')
        const subMemberCount = this.get(this, 'info._raw.subMemberCount')
        this.nav(
          `/subpackage/member/pages/team/index?subMemberCount=${subMemberCount}&typeId=${this.typeId}&memberId=${memberId}`
        )
      },
      call() {
        this.isPopupShow = false
        uni.makePhoneCall({
          phoneNumber: '400-8953068'
        });
      },
      colseTipShow() {
        this.isNoTipShow = true
        uni.setStorageSync('isToMemberTipShow', 'Y');
      },
      async getContractCount() {
       const res = await PageBo.sendApi('info', {
          params: {
            page: 'pageMine'
          },
          data: {}
        })
        if(res.code !== 2000){
          return
        }
        this.totalContract = res.data.contractCount;
      },
    },
    created() {
      this.isNoTipShow = !!uni.getStorageSync('isToMemberTipShow');
    }
  }
</script>

<style lang="less" scoped>
  .mine {
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #fff7fe;

    .top-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 220rpx;
      padding: 0 30rpx;
      background: #db187c;
      z-index: 0;
    }

    .mine-info {
      position: relative;
      padding: 0 30rpx;
      z-index: 1;
      color: #fff;

      &-base {
        .flexLayout(@a: center);
        position: relative;

        .user-name {
          .textOverflow(1);
          margin-right: 40rpx;
          font-size: 36rpx;
          height: 45rpx;
        }

        .user-type {
          margin-right: 20rpx;
          padding: 7rpx 10rpx;
          font-size: 26rpx;
          border-radius: 6rpx;
          background: #fff;
          color: @color-theme;
        }

        .iconfont {
          font-size: 50rpx;

          &.in {
            position: absolute;
            right: 0;
            font-size: 30rpx;
          }
        }
      }

      &-account {
        margin-top: 29rpx;
        font-size: 30rpx;
        color: @color-theme--light;
      }
    }

    .mine-main {
      margin-top: 40rpx;
      padding: 0 30rpx 30rpx 30rpx;
      position: relative;
      z-index: 20;

      .mine-block {
        .flexLayout();
        flex-wrap: wrap;
        background: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;

        &-item {
          .flexLayout(@dir: column, @a: center, @j: center);
          padding: 40rpx 0;
          flex: 1;

          &__top {
            font-size: 48rpx;
            font-weight: bold;
            color: #333333;

            &.img {
              width: 50rpx;
              height: 50rpx;
            }
          }

          &__btm {
            margin-top: 20rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #666666;
          }
        }

        &:not(:first-of-type) {
          margin-top: 30rpx;
        }

        &.object {
          justify-content: flex-start;

          .mine-block {
            &-item {
              flex: unset;
              width: 25%;

              &:active {
                background-color: #eee;
              }
            }
          }
        }
      }

      .balance {
        margin-top: 40rpx;
        background: #ffffff;
        border-radius: 10rpx;
        padding: 30rpx 20rpx;

        .b-swiper {
          height: 242rpx;

          .s-item {
            width: 590rpx;

            .content {
              position: relative;
              margin: 0 5rpx;
              width: calc(100% - 10rpx);
              height: 100%;

              .img {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
              }

              .name {
                .flexLayout(@j: space-between, @a: center);
                padding: 30rpx 30rpx 0 30rpx;
                font-size: 32rpx;
                color: #858687;

                .icon-eye {
                  font-size: 60rpx;
                  color: #666666;
                  display: flex;
                  align-items: center;
                }
              }

              .amount {
                padding-left: 30rpx;
                padding-top: 10rpx;
                font-size: 46rpx;
                font-weight: bold;
              }

              .composition {
                margin-top: 10rpx;
                font-size: 28rpx;
                padding-left: 30rpx;
                color: #858687;

                .recharge {
                  margin-left: 40rpx;
                }
              }
            }
          }
        }

        .shop-change {
          .flexLayout(@j: space-between, @a: center);
          margin-top: 20rpx;
          padding-left: 10rpx;
          height: 60rpx;

          &-name {
            width: 400rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            font-weight: 500;
            color: #333;
          }

          .shop-picker {
            padding: 10rpx 20rpx;

            &-text {
              font-size: 28rpx;
              color: @color-theme;
            }

            .icon {
              vertical-align: bottom;
              font-size: 40rpx;
              color: #dc117d;
            }
          }
        }
      }
    }

    .mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .popup {
      width: 600rpx;
      height: 660rpx;
      position: fixed;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      left: 10%;
      top: 18%;
      border-radius: 20rpx;

      .close {
        position: absolute;
        right: 5%;
        top: 5%;
        font-size: 50rpx;
        color: #999999;
      }

      .p-img {
        position: absolute;
        width: 600rpx;
        height: 660rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }

      .p-title {
        position: absolute;
        height: 35rpx;
        top: 400rpx;
        font-size: 30rpx;
        text-align: center;
        line-height: 35rpx;
        color: #333333;
      }

      .p-number {
        position: absolute;
        top: 440rpx;
        width: 460rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 48rpx;
        font-weight: bold;
        color: #db187c;

        .n-phone {
          margin-right: 10rpx;
          font-size: 45rpx;
        }
      }

      .p-btn {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        width: 600rpx;
        height: 120rpx;
        font-size: 36rpx;
        border-bottom-left-radius: 30rpx;
        border-bottom-right-radius: 30rpx;

        .consult {
          width: 200rpx;
          height: 60rpx;
          margin: 0;
          padding: 0;
          line-height: 60rpx;
          background: transparent;
          border-radius: 10rpx;
          color: #666666;
          font-size: 36rpx;

          &::after {
            border-color: transparent;
          }
        }

        .call {
          width: 200rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333333;
        }
      }

    }

    .m-tip {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 99;

      image {
        width: 100%;
        height: 100%;
        z-index: 99;
      }

    }
  }
</style>